<template>
	<div class="user-index">
		<a-modal
			v-model:visible="props.visible"
			class="user-modal"
			width="85%"
			@ok="handleOk"
			:footer="null"
			@cancel="cancel"
			:mask="false"
		>
			<h3>用户服务协议</h3>
			<div class="content">
				<span class="title">1.设备绑定操作</span>
				<span class="desc"
					>1.1用户自行承担设备绑定操作的责任，包括但不限于启动绑定流程、连接加密锁到设备的
					USB端口等。</span
				>
				<span class="desc"
					>1.2加密锁只能绑定到用户指定的设备上，以确保数据安全性和防止滥用。</span
				>
				<span class="desc"
					>1.3平台不对用户设备绑定过程中可能出现的问题：设备损坏、数据丢失或其他损害负责。</span
				>
				<span class="title">2.安全性</span>
				<span class="desc"
					>2.1用户应妥善保管加密锁，以防止丢失、被盗或未经授权使用。</span
				>
				<span class="desc"
					>2.2平台采取必要的安全措施来保护客户数据的安全性，包括数据加密和访问控制。</span
				>
				<span class="desc"
					>2.3平台致力于确保加密锁数据的保密性和完整性。</span
				>
				<span class="title">3.法律遵守：</span>
				<span class="desc"
					>3.1用户应遵守所有适用法律和法规，包括但不限于知识产权、隐私权和数据保护法律。</span
				>
				<span class="desc"
					>3.2平台不对用户的违法行为或侵权行为负责。</span
				>
				<span class="title">4.修订和更新：</span>
				<span class="desc"
					>4.1平台保留随时修订和更新本免责声明的权利。用户在使用服务前应定期查阅本免责声明
					的最新版本。</span
				>
				<span class="title">5.联系我们：</span>
				<span class="desc"
					>5.1如果您有任何疑问或需要进一步解释，请联系我们的客户支持团队。</span
				>
			</div>
			<div class="footer">
				<a-checkbox @change="change" v-model:checked="checked"
					>我已阅读并同意《用户服务协议》</a-checkbox
				>
				<div>
					<span class="agree">请勾选同意后进入下一步</span>
					<a-button
						type="primary"
						@click="handleOk"
						:disabled="!checked"
						>接受</a-button
					>
				</div>
			</div>
		</a-modal>
	</div>
</template>

<script setup>
import { ref, defineProps, onMounted } from 'vue';

const props = defineProps(['visible']);
const emits = defineEmits(['update:visible']);
let checked = ref(false);
const handleOk = () => {
	if (checked.value) {
		checked.value = false;
		emits('next', true);
	}
};
const change = (e) => {
	checked.value = e.target.checked;
};
const cancel = () => {
	checked.value = false;
	emits('next', false);
};
onMounted(() => {
	checked.value = false;
});
</script>

<style lang="scss" scoped>
h3 {
	font-size: 21px;
	font-weight: bold;
	color: #287cfa;
	text-align: center;
}

.content {
	height: 350px;
	overflow-y: auto;

	.title {
		font-weight: bold;
		display: block;
		font-size: 16px;
		color: #333333;
	}

	.desc {
		display: block;
		font-size: 14px;
		color: #2a2a2a;
	}
}

.footer {
	display: flex;
	justify-content: space-between;
	margin-top: 30px;

	div {
		.agree {
			font-size: 14px;
			color: #287cfa;
			margin-right: 16px;
		}
	}
}
</style>
